<template>
  <el-dialog
    title=""
    custom-class="customClass"
    :visible.sync="dialogVisible"
    width="1000px">
    <div v-loading="loading" style="min-height: 500px">
                <el-card class="box-card" style="padding:20px;width:840px;margin:0 auto;overflow: auto">
<!--                  <div id="print-div2">-->
<!--                     <img :src="orderInfo.printPicUrl"  v-if="orderInfo.printPicUrl" style="width:100%"/>-->
<!--                  </div>-->
                    <div id="print-div2" style="font-family: 'SimSun'">
                                <div class="title" style="font-size:30px;font-weight: 800;text-align: center;line-height: 22px;padding-top:20px;">收货确认函</div>
                                <div class="paper-top" style="font-size: 14px;margin-top: 20px;margin-bottom: 10px;line-height:22px;">
                                    <div>尊敬的客户 <span style="text-decoration: underline;font-weight: bold">{{ orderInfo.customerName }}</span>：</div>
                                    <div style="text-indent:24px">{{ orderInfo.deliverMsg }}</div>
                                </div>
                                <div class="good-table">
                                    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-left:1px solid #000;border-bottom:1px solid #000">
                                        <tr>
                                            <th align="center" style="white-space:nowrap; font-weight: normal;font-size:14px; border-top:1px solid #000;padding:5px 10px;line-height: 20px;border-right:1px solid #000;">商品名称</th>
                                            <th align="center" style="white-space:nowrap; font-weight: normal;font-size:14px; border-top:1px solid #000;padding:5px 10px;line-height: 20px;border-right:1px solid #000;">规格型号</th>
                                            <th align="center" style=" width:50px;white-space:nowrap;font-weight: normal;font-size:14px; border-top:1px solid #000;padding:5px 10px;line-height: 20px;border-right:1px solid #000;">单位</th>
                                            <th align="center" style=" width:80px;white-space:nowrap;font-weight: normal;font-size:14px; border-top:1px solid #000;padding:5px;line-height: 20px;border-right:1px solid #000;">数量</th>
                                            <th align="center" style=" white-space:nowrap;font-weight: normal;font-size:14px; border-top:1px solid #000;padding:5px;line-height: 20px;border-right:1px solid #000;">合同单号</th>
                                            <th align="center" style="white-space:nowrap; font-weight: normal;font-size:14px; border-top:1px solid #000;padding:5px 10px;line-height: 20px;border-right:1px solid #000;">备注</th>
                                        </tr>
                                        <tr v-for="item in orderInfo.deliverGoods">
                                            <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px;line-height: 20px;"><div class="td-con" style="white-space:nowrap;">{{item.goodsName}}</div></td>
                                            <td align="center" style="font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div class="td-con"> {{item.goodsSn}}</div></td>
                                            <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div style="white-space:nowrap;"  class="td-con">{{item.goodsUnit}}</div></td>
                                            <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px;line-height: 20px;"><div style="white-space:nowrap;"  class="td-con">{{item.goodsNum}}</div></td>
                                            <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px;line-height: 20px;"><div style="white-space:nowrap;"  class="td-con">{{item.orderSn}}</div></td>
                                            <td align="center"  style="font-weight: normal;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;border-right: 1px solid #000"><div class="td-con" style="max-width:150px">{{item.orderRemark}}</div></td>
                                        </tr>
                                        <tr v-for="item in lines">
                                          <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px;line-height: 20px;height:31px"><div class="td-con" style="white-space:nowrap;"> </div></td>
                                          <td align="center" style="height:31px;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div class="td-con"> </div></td>
                                          <td align="center" style="height:31px;white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div style="white-space:nowrap;"  class="td-con"></div></td>
                                          <td align="center" style="height:31px;white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px;line-height: 20px;"><div style="white-space:nowrap;"  class="td-con"></div></td>
                                          <td align="center" style="height:31px;white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px;line-height: 20px;"><div style="white-space:nowrap;"  class="td-con"></div></td>
                                          <td align="center"  style="height:31px;font-weight: normal;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;border-right: 1px solid #000"><div class="td-con" style="max-width:150px"></div></td>
                                        </tr>

                                      <tr>
                                        <td colspan="6" style="height:150px;" valign="top">收货单位已确认收货请盖章：</td>
                                      </tr>
                                    </table>
                                </div>

                               <div class="paper-bottom" style="position: relative;margin-top:20px;line-height: 24px;font-size:14px;text-align: right">
                                    <div>请将本确认函盖章回传，传真号码：<span style="font-size:30px;font-weight: 800">0519-85780186</span></div>
                                    <div style="margin-top:10px;letter-spacing: 1px;">供货单位名称：{{orderInfo.companyName}}</div>
                                    <div  style="">{{orderInfo.time}}</div>
                                </div>
                            </div>
                </el-card>
                <div style="margin-top:40px;text-align: center">
                    <el-button type="primary" style="width:150px;" @click="printdiv">打印</el-button>
                </div>
    </div>
  </el-dialog>
</template>
<script>
    import { mapGetters } from 'vuex'
    import store from '@/store'
    import {batchPrint,updateBatchPrint} from '@/api/order'
    import "@/utils/jQuery.print"
    export default {
        name: "customerDetail",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                orderInfo: {},
                dialogVisible:false,
                lines:0,
                ids:[],
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {

        },
        filters: {


        },
        methods:{
          showPop(ids){
                this.getPageInfo(ids)
            },
            //打印
            printdiv(){
                $("#print-div2").print({
                    globalStyles:true,//是否包含父文档的样式，默认为true
                    mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                    stylesheet:null,//外部样式表的URL地址，默认为null
                    noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
                    iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                    append:null,//将内容添加到打印内容的后面
                    prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
                    deferred: this.printDeferred()//回调函数
                });
            },
            printDeferred(){
              this.dialogVisible = false
              updateBatchPrint({ids:this.ids});
              this.$emit("confirmPrint")
            },

            //获取合同详情
            getPageInfo(ids){
                let data = {};
                data.ids = ids;
                this.ids = ids;
                this.loading = true;
                this.dialogVisible = true;
                batchPrint(data).then(res=>{

                    this.orderInfo = res;
                    this.loading = false;
                    this.lines = 8 - this.orderInfo.deliverGoods.length
                    console.log(this.orderInfo.deliverGoods)
                }).catch(()=>{
                   this.loading = false;
                })
            },
        }
    }
</script>

<style lang="scss">

    #print-div2{
        font-size:12px;
        font-family: "SimSun";
        .title{
            font-size:18px;
            font-weight: bold;
            text-align: center;
            line-height: 22px;
            padding-top:20px;
        }
        .paper-top{
            font-size:14px;
            margin-top:10px;
            .label{
            }
            .text{
                border-bottom:1px solid #000;
            }
            margin-bottom:10px;
        }
        .paper-title{
            font-size:14px;
            line-height: 20px;
            .title-no{
                padding-right:10px;
            }
            .tianXie{
                font-size:14px;
                text-decoration: underline;
            }
        }
        .good-table{
            table{
                border-left:2px solid #000;
                border-bottom:2px solid #000;
                th{
                    font-weight: normal;
                    font-size:14px;
                    border-top:2px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                    border-right:1px solid #000;
                }
                td{
                    font-weight: normal;
                    border-right:1px solid #000;
                    border-top:1px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                }
                .td-con{
                    word-break:break-all;
                    font-size:12px;
                }
            }
        }
        .paper-bottom{
            margin-top:20px;
            line-height: 20px;
            font-size:14px;
        }
    }
    .customClass .el-dialog__body{
      padding:0
    }
</style>
